<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>零碰撞小球动画</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        background: #777;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .circle {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }

    .circle:before {
        content: '';
        position: absolute;
        top: 20px;
        left: 20px;
        right: 20px;
        bottom: 20px;
        border-radius: 50%;
        box-shadow: 0 0 0 10px #333,
            0 0 0 20px #444,
            0 0 0 30px #555,
            0 0 0 40px #666,
            0 0 0 50px #777,
            inset 0 0 40px rgba(0, 0, 0, 0.5);
    }

    .dots {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        border-radius: 50%;
        animation: animate 10s linear infinite;
    }
    @keyframes animate {
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }

    .dots::before {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: #fff;
        border: 50%;
        left: calc(50% - 5px);
        top: 0;
        border-radius: 50%;
        box-shadow: 50px 0 0 #fff,
            -65px -50px 0 #fff,
            -65px 50px 0 #fff,
            -55px 0 0 #ff0,
            45px 35px 0 #ff0,
            -40px -40px 0 #ff0,
            40px -40px 0 #fff,
            55px -59px 0 #fff;
            animation: animate 10s linear infinite;

    }

    .dots::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: #fff;
        border: 50%;
        left: calc(50% - 5px);
        bottom: 0;
        border-radius: 50%;
        box-shadow: -50px 0 0 #fff,
            65px 50px 0 #fff,
            65px -50px 0 #fff,
            55px 0 0 #ff0,
            -45px -35px 0 #ff0,
            40px 40px 0 #ff0,
            -40px 40px 0 #fff,
            -55px 59px 0 #fff;
            animation: animate 10s linear infinite;

    }
</style>

<body>
    <div class="circle">
        <div class="dots">

        </div>
    </div>
</body>

</html>